<!-- src/views/PublicActivityDetailView.vue -->
<template>
  <div>
    <h2>{{ activity.title }}</h2>
    <p>{{ activity.description }}</p>
    <p><strong>Date:</strong> {{ activity.date }}</p>
    <p><strong>Location:</strong> {{ activity.location }}</p>
    <router-link to="/public-activities">Back to Activities</router-link>
  </div>
</template>

<script>
import activities from '../data/activities.json';

export default {
  data() {
    return {
      activity: {}
    }
  },
  created() {
    const activityId = parseInt(this.$route.params.id);
    this.activity = activities.find(a => a.id === activityId) || {};
  }
}
</script>